React useActionState Middleware -putkisto: Vahvojen toimintojen käsittelyketjujen rakentaminen

Reactin useActionState -koukku tarjoaa tehokkaan ja elegantin tavan hallita tilaa ja käsitellä asynkronisia toimintoja. Vaikka yksinkertaiset toiminnot ovat suoraviivaisia, monimutkaiset sovellukset vaativat usein hienostuneempaa toimintojen käsittelyä. Tässä kohtaa middleware-putkisto tulee kuvaan, jonka avulla voit siepata, muokata ja parantaa toimintoja ennen kuin ne päivittävät tilaasi. Tämä lähestymistapa edistää puhtaampaa koodia, parempaa huolenaiheiden erottamista ja parantunutta ylläpidettävyyttä.

Mikä on middleware-putkisto?

Middleware-putkisto on joukko funktioita, joista jokainen vastaanottaa toiminnon ja mahdollisesti muokkaa sitä tai suorittaa sivuvaikutuksia ennen kuin välittää sen eteenpäin ketjun seuraavalle funktiolle. Ketjun viimeinen funktio päivittää tyypillisesti tilan käyttämällä setState-funktiota, jonka useActionState tarjoaa. Ajattele sitä kokoonpanolinjana, jossa jokainen asema suorittaa tietyn tehtävän saapuvalle toiminnalle.

Middleware-putkiston käytön keskeiset hyödyt ovat:

• Huolenaiheiden erottaminen: Jokaisella middleware-funktiolla on yksi ainoa vastuu, mikä tekee koodista helpommin ymmärrettävän ja testattavan.
• Uudelleenkäytettävyys: Middleware-funktioita voidaan käyttää uudelleen eri toimintojen ja komponenttien välillä.
• Modularisuus: On helppo lisätä, poistaa tai järjestää middleware-funktioita uudelleen sovelluksesi kehittyessä.
• Testattavuus: Yksittäisiä middleware-funktioita on helpompi testata erikseen.

Middleware-putkiston toteuttaminen useActionState-toiminnossa

Jaetaan se, kuinka luoda useActionState -koukku middleware-putkistolla. Aloitamme perusesimerkillä ja tutkimme sitten monimutkaisempia skenaarioita.

Perusesimerkki: Toimintojen kirjaaminen

Luodaan ensin yksinkertainen middleware, joka kirjaa jokaisen toiminnon konsoliin.

            // Middleware-funktio
const loggerMiddleware = (action, setState) => {
 console.log('Toiminto:', action);
 setState(action);
};

// Mukautettu useActionState-koukku
const useActionStateWithMiddleware = (initialState, middleware) => {
 const [state, setState] = React.useState(initialState);

 const dispatch = React.useCallback(
 action => {
 middleware(action, setState);
 },
 [middleware, setState]
 );

 return [state, dispatch];
};

// Käyttö
const MyComponent = () => {
 const [count, setCount] = useActionStateWithMiddleware(0, loggerMiddleware);

 const increment = () => {
 setCount(count + 1);
 };

 return (
 

 
Lukumäärä: {count}
 Lisää
 
 );
};

            

              
                Copy
              
            
          

Tässä esimerkissä:

• loggerMiddleware on yksinkertainen middleware-funktio, joka kirjaa toiminnon ja kutsuu sitten setState-toiminnon päivittääkseen tilan.
• useActionStateWithMiddleware on mukautettu koukku, joka ottaa alkuperäisen tilan ja middleware-funktion argumentteina.
• dispatch-funktio luodaan käyttämällä useCallback-toimintoa estääkseen tarpeettomat uudelleenrenderöinnit. Se kutsuu middleware-funktiota toiminnolla ja setState-toiminnolla.

Putkiston rakentaminen

Luodaksesi putkiston, tarvitsemme tavan ketjuttaa useita middleware-funktioita yhteen. Tässä on funktio, joka tekee juuri sen:

            const applyMiddleware = (...middlewares) => (action, setState) => {
 middlewares.forEach(middleware => {
 action = middleware(action, setState) || action; // Salli middlewaren muokata/korvata toiminto.
 });
 setState(action);  // Tämä rivi suoritetaan aina ja asettaa lopullisen tilan.
};

            

              
                Copy
              
            
          

Nyt voimme luoda monimutkaisemman esimerkin, jossa on useita middleware-funktioita.

            // Middleware-funktiot
const loggerMiddleware = (action) => {
 console.log('Toiminto:', action);
 return action;
};

const uppercaseMiddleware = (action) => {
 if (typeof action === 'string') {
 return action.toUpperCase();
 }
 return action;
};

const asyncMiddleware = (action, setState) => {
 if (typeof action === 'function') {
 action((newAction) => setState(newAction));
 return;
 }
 return action;
};

const myMiddleware = (action, setState) => {
 if (action.type === "API_CALL") {
 setTimeout(() => {
 setState(action.payload)
 }, 1000)
 return; //Estä välitön tilan muutos
 }
 return action;
}

// Mukautettu useActionState-koukku
const useActionStateWithMiddleware = (initialState, ...middlewares) => {
 const [state, setState] = React.useState(initialState);

 const dispatch = React.useCallback(
 action => {
 applyMiddleware(...middlewares)(action, setState);
 },
 [setState, ...middlewares]
 );

 return [state, dispatch];
};

// Käyttö
const MyComponent = () => {
 const [message, setMessage] = useActionStateWithMiddleware('', loggerMiddleware, uppercaseMiddleware, asyncMiddleware, myMiddleware);

 const updateMessage = (newMessage) => {
 setMessage(newMessage);
 };

 const asyncUpdate = (payload) => (setState) => {
 setTimeout(() => {
 setState(payload);
 }, 2000);
 };

 const apiCall = (payload) => {
 setMessage({type: "API_CALL", payload: payload})
 }

 return (
 

 
Viesti: {message}
  updateMessage('hello world')}>Päivitä viesti
  setMessage(asyncUpdate('Async Hello'))}>Asynkroninen päivitys
  apiCall('Api Data')}>API-KUTSU
 
 );
};

            

              
                Copy
              
            
          

Tässä kattavammassa esimerkissä:

• Meillä on useita middleware-funktioita: loggerMiddleware, uppercaseMiddleware ja asyncMiddleware.
• loggerMiddleware kirjaa toiminnon.
• uppercaseMiddleware muuntaa toiminnon isoiksi kirjaimiksi, jos se on merkkijono.
• asyncMiddleware käsittelee asynkronisia toimintoja. Jos toiminto on funktio, se olettaa sen olevan thunkin ja kutsuu sitä setState-funktiolla.
• useActionStateWithMiddleware -koukku hyväksyy nyt muuttujan määrän middleware-funktioita.
• dispatch-funktio kutsuu applyMiddleware-funktiota kaikilla middleware-funktioilla.

Kehittyneet Middleware-konseptit

Virheiden käsittely

Middlewareä voidaan käyttää myös virheiden käsittelyyn. Voit esimerkiksi luoda middleware-toiminnon, joka kaappaa virheet ja kirjaa ne palveluun, kuten Sentry tai Rollbar.

            const errorHandlingMiddleware = (action, setState) => {
 try {
 setState(action);
 } catch (error) {
 console.error('Virhe:', error);
 // Kirjaa virhe palveluun, kuten Sentry tai Rollbar
 }
};

            

              
                Copy
              
            
          

Ehdollinen Middleware

Joskus haluat käyttää middleware-funktiota vain tietyissä olosuhteissa. Voit saavuttaa tämän kääpimällä middleware-funktion ehdollisessa tarkistuksessa.

            const conditionalMiddleware = (condition, middleware) => (action, setState) => {
 if (condition(action)) {
 middleware(action, setState);
 } else {
 setState(action);
 }
};

// Käyttö
const useActionStateWithConditionalMiddleware = (initialState, middleware, condition) => {
 const [state, setState] = React.useState(initialState);

 const dispatch = React.useCallback(
 action => {
 if (condition(action)) {
 middleware(action, setState);
 } else {
 setState(action);
 }
 },
 [middleware, setState, condition]
 );

 return [state, dispatch];
};

const MyComponent = () => {
 const [count, setCount] = useActionStateWithConditionalMiddleware(0, loggerMiddleware, (action) => typeof action === 'number');

 const increment = () => {
 setCount(count + 1);
 };

 const updateMessage = (message) => {
 setCount(message);
 };

 return (
 

 
Lukumäärä: {count}
 Lisää
  updateMessage('Ei numero')}>Päivitä viesti
 
 );
};

            

              
                Copy
              
            
          

Asynkroninen Middleware

Kuten aikaisemmassa esimerkissä näimme, middleware voi käsitellä asynkronisia toimintoja. Tämä on hyödyllistä API-kutsujen tekemiseen tai muiden pitkään kestävien tehtävien suorittamiseen.

            const apiMiddleware = (action, setState) => {
 if (typeof action === 'function') {
 action(setState);
 } else {
 setState(action);
 } 
};

// Käyttö
const MyComponent = () => {
 const [data, setData] = useActionStateWithMiddleware(null, apiMiddleware);

 const fetchData = () => (setState) => {
 fetch('https://api.example.com/data')
 .then(response => response.json())
 .then(data => setState(data));
 };

 const handleClick = () => {
 setData(fetchData());
 };

 return (
 

 Hae tiedot
 {data && 
{JSON.stringify(data, null, 2)}
}
 
 );
};

            

              
                Copy
              
            
          

Todellisia esimerkkejä

Tarkastellaan joitain todellisia esimerkkejä siitä, miten voit käyttää middleware-putkistoja React-sovelluksissasi.

Todennus

Voit käyttää middlewareä todennuksen käsittelyyn. Voit esimerkiksi luoda middleware-toiminnon, joka sieppaa todennusta vaativat toiminnot ja ohjaa käyttäjän kirjautumissivulle, jos hän ei ole kirjautunut sisään.

            const authMiddleware = (action, setState) => {
 if (action.type === 'SUOJATTU_TOIMINTO' && !isAuthenticated()) {
 redirectToLoginPage();
 } else {
 setState(action);
 } 
};

            

              
                Copy
              
            
          

Tietojen validointi

Voit käyttää middlewareä tietojen validoimiseen ennen kuin ne tallennetaan tilaan. Voit esimerkiksi luoda middleware-toiminnon, joka tarkistaa, onko lomakkeen lähetys kelvollinen, ja näyttää virheviestin, jos se ei ole.

            const validationMiddleware = (action, setState) => {
 if (action.type === 'LOMAKKEEN_LÄHETYS') {
 const errors = validateForm(action.payload);
 if (errors.length > 0) {
 displayErrorMessages(errors);
 } else {
 setState(action.payload);
 }
 } else {
 setState(action);
 } 
};

            

              
                Copy
              
            
          

Analytics

Voit käyttää middlewareä käyttäjän vuorovaikutusten seuraamiseen ja analytiikkatietojen lähettämiseen palveluun, kuten Google Analytics tai Mixpanel.

            const analyticsMiddleware = (action, setState) => {
 trackEvent(action.type, action.payload);
 setState(action);
};

function trackEvent(eventType, eventData) {
 // Korvaa analytiikan seurantakoodillasi
 console.log(`Seurantatapahtuma: ${eventType} tiedoilla:`, eventData);
}

            

              
                Copy
              
            
          

Globaalit huomioon otettavat asiat

Kun rakennat sovelluksia, joilla on globaali yleisö, on tärkeää ottaa huomioon tekijöitä, kuten:

• Lokalisaatio: Middlewareä voidaan käyttää lokalisaation käsittelyyn, kuten päivämäärien, lukujen ja valuuttojen muotoiluun käyttäjän alueen mukaan.
• Saavutettavuus: Varmista, että middleware-toimintosi ovat vammaisten käyttäjien saatavilla. Anna esimerkiksi vaihtoehtoinen teksti kuville ja käytä semanttista HTML:ää.
• Suorituskyky: Ole tietoinen middleware-toimintojesi vaikutuksesta suorituskykyyn, varsinkin käsitellessäsi suuria tietomääriä tai monimutkaisia laskelmia.
• Aikavyöhykkeet: Harkitse aikavyöhykkeiden eroja käsitellessäsi päivämääriä ja aikoja. Middlewareä voidaan käyttää muuntamaan päivämäärät ja ajat käyttäjän paikalliseksi aikavyöhykkeeksi.
• Kulttuurinen herkkyys: Ole tietoinen kulttuurieroista ja vältä käyttämästä kieltä tai kuvamateriaalia, joka voi olla loukkaavaa tai sopimatonta.

Middleware-käytön hyödyt useActionStatessa

• Parannettu koodin organisointi: Erottamalla huolenaiheet erillisiksi middleware-funktioiksi, koodistasi tulee modulaarisempi ja helpompi ylläpitää.
• Parannettu testattavuus: Jokainen middleware-funktio voidaan testata itsenäisesti, mikä helpottaa koodisi laadun varmistamista.
• Lisääntynyt uudelleenkäytettävyys: Middleware-funktioita voidaan käyttää uudelleen eri komponenteissa ja sovelluksissa, mikä säästää aikaa ja vaivaa.
• Suurempi joustavuus: Middleware-putkistot mahdollistavat middleware-funktioiden helpon lisäämisen, poistamisen tai uudelleenjärjestelyn sovelluksesi kehittyessä.
• Yksinkertaistettu virheenkorjaus: Kirjaamalla toimintoja ja tilamuutoksia middleware-toiminnossa, voit saada arvokasta tietoa sovelluksesi käyttäytymisestä.

Mahdolliset haitat

• Lisääntynyt monimutkaisuus: Middlewaren käyttöönotto voi lisätä sovelluksesi monimutkaisuutta, varsinkin jos et ole perehtynyt konseptiin.
• Suorituskyvyn kuorma: Jokainen middleware-funktio lisää pienen määrän kuormaa, mikä voi vaikuttaa suorituskykyyn, jos sinulla on suuri määrä middleware-funktioita.
• Virheenkorjaushaasteet: Middleware-putkistojen virheenkorjaus voi olla haastavaa, varsinkin jos sinulla on monimutkaista logiikkaa tai asynkronisia toimintoja.

Parhaat käytännöt

• Pidä middleware-funktiot pieninä ja keskittyneinä: Jokaisella middleware-funktiolla pitäisi olla yksi ainoa vastuu.
• Kirjoita yksikkötestejä middleware-funktioillesi: Varmista, että middleware-funktiosi toimivat oikein kirjoittamalla yksikkötestejä.
• Käytä kuvaavia nimiä middleware-funktioillesi: Tämä helpottaa sen ymmärtämistä, mitä kukin middleware-funktio tekee.
• Dokumentoi middleware-funktiosi: Selitä kunkin middleware-funktion tarkoitus ja miten se toimii.
• Ole tietoinen suorituskyvystä: Vältä suorittamasta kalliita toimintoja middleware-funktioissasi.

Vaihtoehtoja Middleware-putkistoille

Vaikka middleware-putkistot ovat tehokas työkalu, on olemassa myös muita lähestymistapoja, joita voit käyttää monimutkaisten toimintojen käsittelyyn Reactissa.

• Redux: Redux on suosittu tilanhallintakirjasto, joka käyttää middlewareä asynkronisten toimintojen ja muiden sivuvaikutusten käsittelyyn.
• Context API: Context API on Reactin sisäänrakennettu ominaisuus, jonka avulla voit jakaa tilaa komponenttien välillä ilman prop drillingiä. Voit käyttää Context API:ta luodaksesi globaalin tilan tallennuksen ja lähettääksesi toimintoja tilan päivittämiseksi.
• Mukautetut Koukut: Voit luoda mukautettuja koukkuja monimutkaisen logiikan kapselointiin ja tilan hallintaan.

Johtopäätös

Reactin useActionState -koukku yhdistettynä middleware-putkistoihin tarjoaa tehokkaan ja joustavan tavan hallita tilaa ja käsitellä monimutkaisia toimintojen käsittelyä. Erottamalla huolenaiheet erillisiksi middleware-funktioiksi voit luoda puhtaampaa, helpommin ylläpidettävää ja testattavampaa koodia. Vaikka on olemassa joitain mahdollisia haittoja, middleware-putkistojen käytön hyödyt ovat usein kustannuksia suuremmat, erityisesti suurissa ja monimutkaisissa sovelluksissa. Noudattamalla parhaita käytäntöjä ja ottamalla huomioon koodisi globaalit vaikutukset, voit rakentaa vahvoja ja skaalautuvia sovelluksia, jotka vastaavat käyttäjien tarpeisiin ympäri maailmaa.